<template>
	<image
		:src="props.src"
		:mode="props.mode"
		:class="[props._class]"
		:style="[
			{ width: props.size + 'rpx' },
			{ height: props.size + 'rpx' },
			{ 'border-radius': props.rounded + 'rpx' },
			props.position ? { position: props.position } : '',
			props.top ? { top: props.top + 'rpx' } : '',
			props.bottom ? { bottom: props.bottom + 'rpx' } : '',
			props.left ? { left: props.left + 'rpx' } : '',
			props.right ? { right: props.right + 'rpx' } : '',
		]"
	></image>
</template>

<script setup>
import { computed, ref, watch, onBeforeMount } from 'vue';
import { useAcPiniaStore } from '@/uni_modules/ac-ui/store/acpinia';
import { pub_props } from '@/uni_modules/ac-ui/utils/minxs/props';

const store = useAcPiniaStore();

const props = defineProps({
	...pub_props,
	// 宽度
	size: {
		type: Number,
	},
	rounded: {
		type: Number,
		default: 100,
	},
	// 是否横向布局
	row: {
		type: Boolean,
	},
	// 是否换行排列
	warp: {
		type: Boolean,
		default: true,
	},
	// 背景颜色
	bg: {
		type: String,
	},
	// 容器背景图 https://picsum.photos/750/1448
	bgImg: {
		type: String,
		default: '',
	},
	// 布局方式
	position: {
		type: String,
		default: 'relation',
	},
	// 布局位置
	top: {
		type: Number,
	},
	bottom: {
		type: Number,
	},
	left: {
		type: Number,
	},
	right: {
		type: Number,
	},
	_class: {
		type: String,
	},
	_style: {
		type: [Array, String, Object],
		default: () => [],
	},
});

const _bg = computed(() => {
	return store.getThemeColor(props.bg);
});
</script>

<style>
.relative {
	position: relative;
}
</style>
